<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/plantilla.xhtml">
    <ui:define name="head">Compra y Venta</ui:define>
    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">COMPRA</h1>
        <div class="entry" style="line-height:200%">

            <p:ajaxStatus style="width:16px;height:16px;">
                <f:facet name="start">
                    <h:graphicImage value="../design/ajaxloading.gif" />
                </f:facet>

                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>

            <h:form id="compraForm">  

                <p:panel id="panel" header="Nueva Compra">  

                    <h:panelGrid columns="3">
                        
                        <h:outputLabel for="proveedor" value="Proveedor: " />
                        <h:selectOneMenu id="proveedor" value="#{compraBean.compra.proveedor}" converter="Proveedor">
                            <f:selectItem itemLabel="Seleccionar un Proveedor" itemValue="" />
                            <f:selectItems value="#{proveedorBean.proveedores}" var="proveedor"
                                           itemLabel="#{proveedor.nombre}" itemValue="#{proveedor}"/>
                        </h:selectOneMenu>
                        
                        <br/>
                        
                        <h:outputLabel for="codigo" value="Codigo de la compra: " />
                        <h:inputText id="codigo" value="#{compraBean.compra.codigo}" label="Codigo"></h:inputText>
                        
                        <br/>
                        
                    </h:panelGrid>
                        
                    <p:commandButton id="showButton" value="Cargar" action="#{compraBean.crearCompra}" update="detalle" />
                        
                        <br/>
                  </p:panel>
                
                <br/><br/>
                
                <p:panel id="detalle" header="Detalles"> 
                    
                    <h:panelGrid columns="3">
                        
                        <h:outputLabel for="compra" value="Código de la compra: " />
                        <h:selectOneMenu id="compra" value="#{compraDetalleBean.compraDetalle.compra}" converter="Compra">
                            <f:selectItem itemLabel="Seleccionar el codigo" itemValue="" />
                            <f:selectItems value="#{compraBean.compras}" var="compra"
                                           itemLabel="#{compra.codigo}" itemValue="#{compra}"/>
                        </h:selectOneMenu>
                        
                        <br/>
                        
                        <h:outputLabel for="producto" value="Producto: " />
                        <h:selectOneMenu id="producto" value="#{compraDetalleBean.compraDetalle.producto}" converter="Producto">
                            <f:selectItem itemLabel="Seleccionar un Producto" itemValue="" />
                            <f:selectItems value="#{productoBean.productos}" var="producto"
                                           itemLabel="#{producto.nombre}" itemValue="#{producto}"/>
                        </h:selectOneMenu>
                        
                        <br/>
                        
                        <h:outputLabel for="cantidad" value="Cantidad: " />
                        <h:inputText id="cantidad" value="#{compraDetalleBean.compraDetalle.cantidad}" label="Cantidad"></h:inputText>
                        
                    </h:panelGrid>
                    
                    <h:commandButton id="anadir" value="Añadir" action="#{compraDetalleBean.crearCompraDetalle}"/>  
                    
                </p:panel>
                
                <br/><br/>
                
                <p:dataTable id="tbCompra" value="#{compraDetalleBean.compraDetalles}" var="row" 
                             paginator="true" paginatorPosition="bottom" selectionMode="single"
                             onRowSelectUpdate="frm:tableButtons"
                             onRowUnselectUpdate="frm:tableButtons"
                             emptyMessage="No se encontraron resultados">

                    <p:column headerText="Codigo de la compra">
                        <h:outputText value="#{row.compra.codigo}" />
                    </p:column>
                    
                    <p:column headerText="Proveedor">
                        <h:outputText value="#{row.compra.proveedor.nombre}" />
                    </p:column>

                    <p:column headerText="Producto">
                        <h:outputText value="#{row.producto.nombre}" />
                    </p:column>

                    <p:column headerText="Cantidad">
                        <h:outputText value="#{row.cantidad}" />
                    </p:column>

                    <!--<f:facet name="footer">  
                        <p:button id="nuevoButton" value="Nuevo" outcome="productoForm"/>  
                        <p:button id="editarButton" value="Editar"/>
                        <p:button id="borrarButton" value="Borrar"/>
                    </f:facet> -->
                </p:dataTable>

            </h:form> 
        </div>

    </ui:define>
</ui:composition>
